<template>
  <el-menu
      class="el-menu-vertical-demo"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">

    <router-link to="/index">
      <el-menu-item index="Index">
        <template slot="title">
          <i class="el-icon-s-home"></i>
          <span slot="title">首 页</span>
        </template>
      </el-menu-item>
    </router-link>

    <!-- 二级导航的使用 -->
    <!-- 			<el-submenu default-active="Index" :index="menu.name" v-for="menu in menuList">
              <template slot="title">
                <i :class="menu.icon"></i>
                <span>{{menu.title}}</span>
              </template>
              <router-link :to="item.path" v-for="item in menu.children">
                <el-menu-item :index="item.name">
                  <template slot="title">
                    <i :class="item.icon"></i>
                    <span slot="title">{{item.title}}</span>
                  </template>
                </el-menu-item>
              </router-link>
          </el-submenu> -->

    <!-- 一级导航使用  v-for 循环对象要进行绑定哪个键，否者后台提示警告-->
    <router-link :to="item.path" v-for="(item,index) in menuList" :key="index">
      <el-menu-item :index="item.name">
        <template slot="title">
          <i :class="item.icon"></i>
          <span slot="title">{{item.title}}</span>
        </template>
      </el-menu-item>
    </router-link>

  </el-menu>
</template>

<script>
export default {
  name: "SideMenu",
  data() {
    return {
      menuList: [
        {
          name: 'UserManga',
          title: '用户管理',
          icon: 'el-icon-s-custom',
          path: '/sys/user',
          component: '',
          // children: [
          // 	{

          // 	}
          // ]
        },
        {
          name: 'NewsManga',
          title: '文章管理',
          icon: 'el-icon-notebook-2',
          path: '/sys/news',
          component: '',
          // children: [
          // 	{

          // 	}
          // ]
        },
        {
          name: 'CollapseManga',
          title: '轮播图管理',
          icon: 'el-icon-picture-outline',
          path: '/sys/collapse',
          component: '',
          // children: [
          // 	{

          // 	}
          // ]
        },
      ]
    }
  }
}
</script>

<style scoped>
.el-menu-vertical-demo {
  height: 100%;
}

a {
  text-decoration: none;
}
</style>
